<ion-header>
  <ng-container *ngIf="titleBar">
    <ion-toolbar [ngClass]="{'bottom-line':titleBar.bottomLine === true}">
      <ion-buttons slot="start">
        <ion-button appDebounceClick (debounceClick)="doDiss()">
          <img src="assets/img/close.png" class="backBtnStyle" />
        </ion-button>
      </ion-buttons>
      <ion-title class="commonTitleText">{{ titleBar.title.labelName }}</ion-title>
    </ion-toolbar>
  </ng-container>
</ion-header>
<ion-content [forceOverscroll]="false">
  <div id="form">
    <form *ngIf="data" [formGroup]="formGroup" action="javascript: return true;">
      <ng-container *ngFor="let item of data.data.formObj" [ngSwitch]="item.type">
        <ng-container *ngSwitchCase="'input'">
          <ion-item class="post-item" [ngStyle]="item?.cssStyle|styleFilter">
            <ion-label class="inputLabel">{{item.label}}</ion-label>
            <ion-input class="inputDefault" type="search" [maxlength]="item.maxLength"
              [ngStyle]="item?.placeHolderCssStyle|styleFilter" [attr.placeholder]="item.placeHolder"
              [formControlName]="item.formKey" [(ngModel)]="item.value" (keyup.enter)="search()">
            </ion-input>
            <span class="jointEnd" *ngIf="item.endLabel">{{item.endLabel}}</span>
          </ion-item>
        </ng-container>

        <!-- 蜂喔新增选择房型控件-->
        <ng-container *ngSwitchCase="'modalMultipleFormKeySelect'">
          <ion-item class="post-item">
            <ion-label>{{item.label}}</ion-label>
            <span class="input" appDebounceClick (debounceClick)="modalMultipleFormKeySelect(item)"
              *ngIf="item.value && item.value !== ''">{{houseTypeShowValue}}</span>
            <span class="input lightgrey" appDebounceClick (debounceClick)="modalMultipleFormKeySelect(item)"
              *ngIf="!item.value || item.value === ''">{{item.placeHolder}}</span>
            <i class="detail-icon"></i>

          </ion-item>
        </ng-container>

        <ng-container *ngSwitchCase="'modalMultipleSelect'">
          <ion-item class="post-item">
            <ion-label>{{item.label}}</ion-label>
            <input type="text" [attr.placeholder]="item.placeHolder" (focus)="modalMultipleSelect(item)"
              class="displayno">
            <span class="input" appDebounceClick (debounceClick)="modalMultipleSelect(item)"
              *ngIf="item.showValue && item.showValue !== ''">{{item.showValue}}</span>
            <span class="input lightgrey" appDebounceClick (debounceClick)="modalMultipleSelect(item)"
              *ngIf="!item.showValue || item.showValue === ''">{{item.placeHolder}}</span>
            <i class="detail-icon"></i>
          </ion-item>
        </ng-container>

        <ng-container *ngSwitchCase="'citySelect'">

          <ion-item class="post-item-search">
            <ion-label>{{item.label}}</ion-label>
            <input type="text" [attr.placeholder]="item.placeHolder" (focus)="openModalCityPage(item)"
              class="displayno">
            <span class="input" appDebounceClick (debounceClick)="openModalCityPage(item)"
              *ngIf="item.showValue && item.showValue !== ''">{{item.showValue}}</span>
            <span class="input lightgrey" appDebounceClick (debounceClick)="openModalCityPage(item)"
              *ngIf="!item.showValue || item.showValue === ''">{{item.placeHolder}}</span>
            <i class="detail-icon"></i>
          </ion-item>
        </ng-container>

        <ng-container *ngSwitchCase="'doubleInput'">
          <ion-item class="post-item">
            <ion-label>{{item.label}}</ion-label>
            <!-- 使用子项中 name 为 key -->
            <ng-container *ngIf="item.useChildName">
              <ng-container *ngFor="let i of item.itemList, let index=index">
                <ion-input type="search" [maxlength]="i.maxLength" (keyup.enter)="search()" formControlName="{{i.name}}"
                  (ionChange)="changeValue($event, i)" [(ngModel)]="i.value" attr.placeholder="{{i.placeHolder}}">
                </ion-input>
                <span class="vertical-line" *ngIf="!index">|</span>
              </ng-container>
            </ng-container>
            <!-- 使用主item中 formkey -->
            <ng-container *ngIf="!item.useChildName">
              <ng-container *ngFor="let i of item.itemList, let index=index">
                <ion-input type="search" [maxlength]="i.maxLength" (keyup.enter)="search()"
                  formControlName="cus_{{index}}{{item.formKey}}" (ionChange)="changeValue($event, i)"
                  [(ngModel)]="i.value" attr.placeholder="{{i.placeHolder}}"></ion-input>
                <span class="vertical-line" *ngIf="!index">|</span>
              </ng-container>
            </ng-container>

            <!-- 金额单位 -->
            <ng-container
            *ngIf="item.subData && item.subData.length === 1 && item.subData[0].type === 'singleColumnSelect'">
            <input type="text" (focus)="showActionSheet(item.subData[0])"
              class="displayno">
            <span class="single-picker"
              appDebounceClick (debounceClick)="showActionSheet(item.subData[0])">{{item.subData[0].showValue}}
              <i class="right-img" [ngStyle]="item.subData[0].imgCssStyle | styleFilter"></i>
            </span>
          </ng-container>
            <span class="jointEnd" *ngIf="item.endLabel">{{item.endLabel}}</span>
          </ion-item>
        </ng-container>

        <ng-container *ngSwitchCase="'singleCheckBox'">
          <ion-item class="post-item">
            <ion-label>{{item.label}}</ion-label>
            <div class="checkbox-container">
              <ng-container *ngFor="let i of item.itemList, let index=index">
                <!-- <ion-checkbox  formControlName="scb_{{index}}{{item.formKey}}" [(ngModel)]="i.isChecked"></ion-checkbox>
                    <ion-label>{{i.label}}</ion-label> -->

                <input type="checkbox" class="hidden-checkbox" id="{{i.formKey}}"
                  (change)="onChange(i, $event.target.checked)" formControlName="{{i.formKey}}" [(ngModel)]="i.checked">
                <label for="{{i.formKey}}" class="checkbox-block">
                  <i [ngClass]="{'check': i.checked, 'uncheck':!i.checked}"> </i>
                  {{i.label}}
                </label>
              </ng-container>
            </div>
          </ion-item>
        </ng-container>

        <ng-container *ngSwitchCase="'singleColumnPicker'">
          <ng-container *ngIf="item.parent!=='order'">
            <ListItem Picker [className]="item.value ? 'select-checked' : 'select-default'" [extra]="item.checkLabel"
              [arrow]="'horizontal'" [cascade]="true" [ngModel]="item.value" [data]="item.data"
              [formControlName]="item.formKey" (ngModelChange)="onOk1($event,item)">
              {{item.label}}
            </ListItem>
          </ng-container>

          <ng-container *ngIf="item.parent==='order'">
            <ListItem Picker [className]="item.value ? 'select-checked' : 'select-default'" [extra]="item.checkLabel"
              [arrow]="'horizontal'" [cascade]="true" [ngModel]="item.value" [data]="item.data"
              formControlName="order_{{item.formKey}}" (ngModelChange)="onOk1($event,item)">
              {{item.label}}
            </ListItem>
          </ng-container>

        </ng-container>

        <ng-container *ngSwitchCase="'doubleColumnPicker'">
          <ListItem Picker [className]="item.value ? 'select-checked' : 'select-default'" [extra]="item.checkLabel"
            [arrow]="'horizontal'" [cascade]="true" [ngModel]="item.value" [data]="item.data"
            [formControlName]="item.formKey" (ngModelChange)="onOk2($event,item)">
            {{item.label}}
          </ListItem>
        </ng-container>

        <ng-container *ngSwitchCase="'departmentSelect'">
          <ion-item class="post-item">
            <ion-label>{{item.label}}</ion-label>
            <input type="text" [attr.placeholder]="item.placeHolder" (focus)="openModalDepartmentPage(item)"
              class="displayno">
            <span class="input" appDebounceClick (debounceClick)="openModalDepartmentPage(item)"
              *ngIf="item.showValue && item.showValue !== ''">{{item.showValue}}</span>
            <span class="input lightgrey" appDebounceClick (debounceClick)="openModalDepartmentPage(item)"
              *ngIf="!item.showValue || item.showValue === ''">{{item.placeHolder}}</span>
            <i class="detail-icon"></i>
          </ion-item>

        </ng-container>

        <!--modal 编辑更多项目 -->
        <ng-container *ngSwitchCase="'modalOfMoreItems'">
          <ion-item class="post-item">
            <ion-label>{{item.label}}</ion-label>
            <input type="text" [attr.placeholder]="item.placeHolder" (focus)="openModalMoreEditInfo(item)"
              class="displayno">
            <span class="input" [ngClass]="{'placeHolderFont': item.showValue==='请选择'}"
              appDebounceClick (debounceClick)="openModalMoreEditInfo(item)"
              *ngIf="item.showValue && item.showValue !== ''">{{item.showValue}}<span class="jointEnd"
                *ngIf="item.extra">{{item.extra}}</span></span>
            <span class="input lightgrey" appDebounceClick (debounceClick)="openModalMoreEditInfo(item)"
              *ngIf="!item.showValue || item.showValue === ''">{{item.placeHolder}}<span class="jointEnd"
                *ngIf="item.extra">{{item.extra}}</span></span>

            <i class="detail-icon"></i>
          </ion-item>
        </ng-container>

        <ng-container *ngSwitchCase="'searchBar'">
          <ion-searchbar #searchBar class="searchBar" (keypress)="search($event)" inputmode=""
            [attr.placeholder]="item?.placeHolder" [(ngModel)]="item.value" [formControlName]="item.formKey"
            [ngStyle]="item?.cssStyle|styleFilter"></ion-searchbar>
        </ng-container>
        <ng-container *ngSwitchCase="'dateInput'">
          <div class="datetimeclass">
            <div class="datetimeclass-label">{{item.label}}</div>
            <div class="datetimeitem-all">
              <div class="datetimeitem" *ngFor="let im of item.itemList;let i=index">{{index}}
                <ListItem DatePicker [showErrorToast]=false [extra]="currentValue(im)" [arrow]="'horizontal'"
                  [maxDate]="getDate(item.max,item)" [minDate]="getDate(item.min,item)" [mode]="'date'"
                  [ngModelOptions]="{standalone: true}" [(ngModel)]="im.defValue" [locale]="locale"
                  (onOk)="datetime($event,im)" [className]="im.value ? 'select-checked' : 'select-default'"
                  format="YYYY-MM-DD" picker="date" [disabled]="im.disable">
                </ListItem>
                <span class="datetimeitem-span" *ngIf="i===0"></span>
                <!--   <ListItem DatePicker [showErrorToast]=false [extra]="currentValue(item.itemList[1])" [arrow]="'horizontal'"
                  [maxDate]="getDate(item.max,item.itemList[1])" [minDate]="getDate(item.min,item)" [mode]="'date'"
                  [ngModelOptions]="{standalone: true}" [(ngModel)]="item.defValueone" [locale]="locale"
                  (onOk)="datetime($event,item.itemList[1])" [className]="item.value ? 'select-checked' : 'select-default'" format="YYYY-MM-DD">
                </ListItem> -->
              </div>
            </div>
          </div>
        </ng-container>

        <!--多选互斥选择框-->
        <ng-container *ngSwitchCase="'multipleSelect3'">
          <div class="multipleSelect3">
            <div class="closerImg"></div>
            <span class="filterTitle">全部筛选</span>
            <img src="assets/fw/nav_icon_close_fw.png" class="closerImg" appDebounceClick (debounceClick)="closeModal()" />
          </div>
          <div class="selectBox">
            <div class="multiple-select-bg-3" [ngStyle]="item.cssStyle | styleFilter">
              <div class="multiple-select-left">
                <div class="item-left" [ngClass]="{'item-left-open': it.open}" *ngFor="let it of item.children; "
                  appDebounceClick (debounceClick)="itemLeftClick(it,item)">
                  <span class="yellow-current" *ngIf="it.open"></span>
                  <span class="red-dot" *ngIf="it.hasValue"></span>
                  {{it.label}}
                </div>
              </div>
              <div class="multiple-select-right">
                <div class="row-bg" style="padding-left: 1.25rem;padding-top: 0;margin-bottom: 0.5rem;width: 100%;"
                  *ngFor="let it of item.current?.children">

                  <div class="row">
                    <i [ngClass]="{'nochecked-row': !it.checked,'checked-row': it.checked}"
                      appDebounceClick (debounceClick)="chooseAll(it,item)"></i>
                    <span style="flex-grow: 1;">{{it.label}}</span>
                  </div>
                  <div class="tag-bg" id=it.value *ngIf="it.children && it.children.length >0">
                    <div class="tag" [ngClass]="{'tag-checked': tag.checked}" appDebounceClick (debounceClick)="tagClick(tag,it,item)"
                      *ngFor="let tag of it.children">{{tag.label}}</div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </ng-container>
        <!-- 自适应2-3级分类多选 子项不定宽 半屏fw-->
        <ng-container *ngSwitchCase="'modalMultipleSelect3_Auto'">

          <div class="modal-post-item">
            <p class="modal-post-item-label">
              {{item.label}}
            </p>

            <p class="modal-post-item-value-bg" appDebounceClick (debounceClick)="modalMultipleSelect3(item,true,true)">
              <span class="modal-select-checked"
                *ngIf="item.value && item.value !== '' && item.value.length ">{{item.showValue}}</span>
              <span class="modal-select-checked" *ngIf="!item.value || item.value === ''">{{item.placeHolder}}</span>
              <img class="modal-post-item-arrow" src="assets/icon/release_icon_arrow_right@2x.png">
            </p>

          </div>
        </ng-container>

        <ng-container *ngSwitchCase="'switchButtonFW_3'">

          <div class="modal-post-item">
            <p class="modal-post-item-label">
              {{item.label}}
            </p>

            <p class="modal-post-item-value-bg" appDebounceClick (debounceClick)="modalMultipleSelect3(item,true,true)">
              <span class="modal-select-checked"
                *ngIf="item.value && item.value !== '' && item.value.length ">{{item.showValue}}</span>
              <span class="modal-select-checked" *ngIf="!item.value || item.value === ''">{{item.placeHolder}}</span>
              <img class="modal-post-item-arrow" src="assets/icon/release_icon_arrow_right@2x.png">
            </p>

          </div>
        </ng-container>
      </ng-container>
    </form>
  </div>

  <!-- <div style="height: 500px;width: 100%;"></div> -->
  <div class="operate" [hidden]="isNative && keyboardShow" *ngIf="!ifbutton">
    <button class="reset" appDebounceClick (debounceClick)="reset()">重置</button>
    <button class="submit" appDebounceClick (debounceClick)="search()">确定</button>
  </div>
  <div class="operatetwo" [hidden]="isNative && keyboardShow" *ngIf="ifbutton">

    <button class="submitone" appDebounceClick (debounceClick)="reset()" *ngIf="resetButton"
      [ngStyle]="resetButton?.cssStyle|styleFilter">{{resetButton.label}}</button>

    <button class="submitone" appDebounceClick (debounceClick)="search()" *ngIf="!buttonstyle"
      [ngStyle]="buttonslink?.cssStyle|styleFilter">{{buttonslink.label}}</button>

  </div>
  <div class="operatethree" [hidden]="isNative && keyboardShow" *ngIf="ifbutton">
    <button class="submittwo" appDebounceClick (debounceClick)="search()" *ngIf="buttonstyle" [ngStyle]="buttonslink?.link?.params?.operatethreeCssStyle | styleFilter">{{buttonslink.label}}</button>
  </div>
</ion-content>